<!--
 * @Author: qinglong
 * @Date: 2021-05-11 11:14:46
 * @LastEditors: qinglong
 * @LastEditTime: 2021-05-14 09:46:10
 * @FilePath: \systemCenter\src\components\ftp\ftpRelationTree.vue
 * @Description: 
-->

<template>
  <div>
    <div class="treeBoxBig">
      <!---->
      <div class="treeBoxDiv" @click="treeBtnorg">
        <!---->
        <input
          type="text"
          readonly="readonly"
          autocomplete="off"
          placeholder="请选择"
          class="treeBox"
          :title="dimName"
          v-model="dimName"
        />
      </div>
      <!---->
      <div class="treeBtnCS" @click="treeBtnorg"></div>
      <!---->
    </div>
    <!-- 树选择框的弹框 -->
    <el-dialog
      v-dialogDrag
      title="选择值"
      :visible.sync="showMemberTree"
      append-to-body
      width="55%"
      top="2%"
    >
      <div
        style="
          height: 410px;
          overflow: auto;
          overflow-x: hidden;
          margin-bottom: 20px;
        "
      >
        <!-- check-strictly -->
        <vp-tree
          :vp-header="{show:true,text:'已构建关系树',search:true,name:'dictItemName'}"
          vp-title
          :filter-node-method="filterNode"
          :data="treeData"
          :props="defaultProps"
          @node-click="handleNodeClick"
          @check="handleNodeClick"
          show-checkbox
          check-strictly
          highlight-current
          ref="configTree"
          node-key="dictItemCode"
          :expand-on-click-node="false"
          check-on-click-node
          treeMaxHeight="320px"
        ></vp-tree>
      </div>
      <!--  -->
      <div
        style="display:flex;justify-content:center;margin-top:20px;margin-bottom:16px;"
        v-if="mulSelect"
      >
        <el-button @click="confirmData">确认</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>

      <!--  -->
    </el-dialog>
  </div>
</template>

<script>
import { listToTree } from "@/lib/util"; // list转tree
import vpTree from "@/components/vpTree";
import { ruleDefinition, publicManage_pub } from "@/api/index";
export default {
  props: {
    value: [String, Array],
    mulSelect: {
      type: Boolean,
      default: false
    },
    dictCode: {
      required: true,
      type: String,
      default: ""
    },
    disabled:{
        type:Boolean,
        default:false
    }
  },
  model: {
    prop: "value",
    event: "checkNode"
  },
  component: {
    vpTree
  },
  data() {
    return {
      dimValue: this.value,
      dimName: "",
      showMemberTree: false,
      indexItems: 0,
      //查询出的数据
      itemData: [],
      //树弹框中的数据
      treeData: [],
      defaultProps: {
        children: "children",
        label: "dictItemName",
        value: "dictItemCode"
      },
      selectData: [], // 勾选的数据
      isinit: false
    };
  },
  watch: {
    dictCode(n) {
      console.log("dictCode", n);
    },
    dimValue(n) {
      this.$emit("checkNode", this.dimValue);
      this.dimName = this.transCodeToName();
    },
    value(val, oldVal) {
      this.dimValue = val;
    }
  },
  computed: {},
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    transCodeToName() {
      if (!this.dimValue) {
        return;
      }
      if (!this.mulSelect) {
        return this.$getLabel(
          this.dimValue,
          this.itemData,
          "dictItemCode",
          "dictItemName"
        );
      } else {
        return this.dimValue
          .map(v => {
            return this.$getLabel(
              v,
              this.itemData,
              "dictItemCode",
              "dictItemName"
            );
          })
          .toString();
      }
    },
    treeBtnorg() {
        if(!this.disabled){
            this.showMemberTree = true;
            this.$nextTick(() => {
        this.showVpTree();
      });
        }
      
    },
    init() {
      let params = {
        dictCode: this.dictCode, // 维度编码
        selectData: "", // 规则编码，
        selectionFlag: "1" // 维度筛选code
      };
      publicManage_pub
        .dimTreenodeQueryTreeNodeTree(params)
        .then(res => {
          if (res.code == 200) {
            this.itemData = res.data;
            this.dimName = this.transCodeToName();
            this.treeData = listToTree(
              "dictItemCode",
              "parentItemCode",
              this.itemData
            );
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(res => {
          console.log(res);
        });
    },
    showVpTree() {
      console.log(" this.treeData", this.treeData);
      if (this.mulSelect) {
        for (let i = 0; i < this.treeData.length; i++) {
          this.treeData[i].disabled = true;
        }
      }
      let selectnodes = [];
      //判断value的类型 回显勾选数据

      if (
        Object.prototype.toString.call(this.value).toLowerCase() ===
        "[object array]"
      ) {
        selectnodes = this.value;
      } else if (
        Object.prototype.toString.call(this.value).toLowerCase() ===
        "[object string]"
      ) {
        selectnodes.push(this.value);
      }
      this.$refs.configTree.setCheckedKeys([]);
      this.$refs.configTree.setCheckedKeys(selectnodes);
      this.$forceUpdate();
    },
    selectDataFunc(val) {},
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleNodeClick(obj) {
      // 1221
      // 多选处理
      if (this.mulSelect) {
        if (this.mulSelect) {
          this.selectData = this.$refs.configTree.$tree.getCheckedNodes();
          // 删除disabled为true的数据
          if (this.selectData.length) {
            for (let i = 0; i < this.selectData.length; i++) {
              if (this.selectData[i].disabled) {
                this.selectData.splice(this.selectData[i], 1);
              }
            }
          }
          console.log(this.selectData, "this.selectData");
        }
      }
      // 单选处理
      if (!this.mulSelect) {
        let _self = this;
        let node = { ...obj };
        this.$refs.configTree.$tree.setCheckedNodes([]);
        this.$refs.configTree.$tree.setCheckedNodes([node]);
        this.$confirm("您确认要选择这条数据吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.dimValue = node.dictItemCode;
            this.dimName = node.dictItemName;
            this.showMemberTree = false;
          })
          .catch(() => {
            this.$refs.configTree.$tree.setCheckedNodes([]);
            this.$message({
              type: "info",
              message: "已取消选择"
            });
          });
      }
    },
    // 确定
    confirmData() {
      // 多选的确定
      if (!this.selectData.length > 0) {
        this.$message.warning("请选择数据");
        return;
      }
      debugger;
      this.dimValue = this.selectData.map(v => {
        return v.dictItemCode;
      });
      this.dimName = this.selectData
        .map(v => {
          return v.dictItemName;
        })
        .toString();
      this.showMemberTree = false;
    },
    // 取消
    cancel() {
      this.$refs.configTree.$tree.setCheckedNodes([]);
      this.$message({
        type: "info",
        message: "已取消选择"
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.treeBoxBig {
  width: 100%;
  height: 100%;
  position: relative;
  .treeBox {
    width: 100%;
    height: 100%;
    padding-right: 35px;
    line-height: 32px;
    font-size: inherit;
    padding: 4px 35px 4px 12px;
    border: 1px solid #ababab;
    border-radius: 4px;
       position: absolute;
  }
  .treeBtnCS {
    background: url("~@/assets/images/popWindow_arrow.gif");
    background-repeat: no-repeat;
    height: 32px;
    width: 32px;
    position: absolute;
    // left: 296px;
    right: 0;
    top: 8px;
    cursor: pointer;
  }
}
.treeBox:hover {
  border-color: #a8c1f3;
}
.treeBox:focus {
  border-color: #a8c1f3;
}
.treeBox:active {
  border-color: #a8c1f3;
}
</style>
